<template>
  <div class="introduce_mark" v-show="showInnovateRemark || showMainRemark" @click="close">
    <div class="introduce_remark" ref="introduceRemark" @click.stop>
      <div class="close pointer" @click="close">x</div>
      <div class="introduce_header">
        <h2 v-show="showMainRemark">{{$t('myAdd.home.mainArea')}}</h2>
        <h2 v-show="showInnovateRemark">{{$t('myAdd.home.innovationArea')}}</h2>
        <p class="introduce_subTitle">{{$t('myAdd.home.areaSubTitle')}}</p>
      </div>
      <div class="introduce_line"></div>
      <div class="introduce_body" v-show="showMainRemark" v-html="mainRemark"></div>
      <div class="introduce_body" v-show="showInnovateRemark" v-html="innovateRemark"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'introduce',
  props: ['showInnovateRemark', 'showMainRemark', 'innovateRemark', 'mainRemark'],
  data () {
    return {
      timer: null
    }
  },
  watch: {
    'showInnovateRemark' (newV, oldV) {
      if (newV) {
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.$refs.introduceRemark.classList.add('translateY')
        }, 15)
      }
      if (!this.showInnovateRemark && !this.showMainRemark) {
        this.$refs.introduceRemark.classList.remove('translateY')
      }
    },
    'showMainRemark' (newV, oldV) {
      if (newV) {
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.$refs.introduceRemark.classList.add('translateY')
        }, 15)
      }
      if (!this.showInnovateRemark && !this.showMainRemark) {
        this.$refs.introduceRemark.classList.remove('translateY')
      }
    }
  },
  methods: {
    close () {
      this.$emit('closeRemark')
    }
  }
}
</script>
